<template>
	<page-container :isback="true" :shownav="true" navtitle="历史建议" :istabbox="false">
		<view class="history-suggestion-root">
			<view>
				<u-tabs :list="tabList" @click="tabClick" :current="currentIndex" :scrollable="scrollable"
					activeStyle="color:#AD2325FF" lineColor="#AD2325FF"></u-tabs>
			</view>
			<view class="query-container">
				<u-search @search="getHistorySuggestion" placeholder="请输入关键字" v-model="keyword"
					:showAction="false"></u-search>
			</view>
			<view class="content-container">
				<view class="suggestion-list" v-show="Array.isArray(suggestionList) && suggestionList.length > 0">
					<view class="suggestion-item" @click="goSubPage(`${suggestionInfoPage}?suggestId=${item.id}`)"
						v-for="(item,index) in suggestionList" :key="item.id">
						<user-container :user-info="item"></user-container>
						<view class="txt-container">
							<view class="title-container">
								{{ item.suggestTitle }}
							</view>
							<view class="content-txt-container text-content">
								{{ item.suggestContent }}
							</view>
						</view>
					</view>
				</view>
				<empty v-show="suggestionList == null || suggestionList.length <= 0"></empty>
			</view>

			<u-loading-page :loading="loading"></u-loading-page>
		</view>
	</page-container>
</template>

<script>
	import {
		getQueryHeaders,
		requestGet
	} from "@/util/means/request";
	import {
		QUERY_NEWEST_SUGGEST,
		QUERY_MY_SUGGEST,
		QUERY_MY_MINOR_SUGGEST
	} from "@/api/suggestion";
	import Empty from "@/components/empty/index.vue";
	import {
		getFileAccessHttpUrl
	} from "@/util/fileUtil";
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		suggestionInfoPage
	} from "@/util/publicConfig";
	import userContainer from '@/components/userContainer'
	export default {
		name: "index",
		mixins: [baseMixins],
		components: {
			Empty,
			userContainer
		},
		data() {
			return {
				suggestionInfoPage,
				authType: '',
				keyword: '',
				suggestionList: [],
				loading: false,
				scrollable: false,
				tabListStatus: [{
					name: '待审查',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '1'
				}, {
					name: '已立案',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '2'
				}, {
					name: '办理中',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '4'
				}, {
					name: '已办结',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '8'
				}, {
					name: '已延期',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '7'
				}, {
					name: '已关闭',
					url: QUERY_MY_SUGGEST,
					suggestStatus: '3'
				}],
				tabList: [{
					name: '最新建议',
					url: QUERY_NEWEST_SUGGEST
				}, {
					name: '我发起的建议',
					url: QUERY_MY_SUGGEST
				}, {
					name: '我联名的建议',
					url: QUERY_MY_MINOR_SUGGEST
				}],
				currentIndex: 0,
				currentName: '最新建议'
			}
		},
		onLoad(params) {
			this.authType = params.authType
			if (params.sName) {
				this.tabListStatus.map((item, index) => {
					if (item.name == params.sName) {
						this.currentIndex = index
						this.currentName = item.name
					}
				})
				this.scrollable = true
				this.tabList = this.tabListStatus
			} else {

			}
			this.keyword = ""
			this.getHistorySuggestion()
		},
		methods: {
			tabClick(item) {
				console.log(item, "######################");
				this.currentIndex = item.index
				this.currentName = item.name
				this.keyword = ""
				this.getHistorySuggestion()
			},

			getHistorySuggestion() {
				let owner = this
				this.loading = true
				requestGet({
					url: this.tabList[this.currentIndex].url,
					data: {
						keyword: this.keyword,
						authType: this.authType,
						pageNo: 1,
						pageSize: 200,
						suggestStatus: this.tabList[this.currentIndex].suggestStatus || ''
					},
					header: getQueryHeaders()
				}).then(res => {
					owner.suggestionList = res.records.map(item => {
						item.suggestInitiatorAvatar = item.suggestInitiatorAvatar != null && item
							.suggestInitiatorAvatar !== '' ? getFileAccessHttpUrl(item
								.suggestInitiatorAvatar) : '/static/img/avatar.png'
						return item
					});
				}).finally(() => {
					owner.loading = false
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.history-suggestion-root {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.query-container {
			width: 100%;
			height: 90rpx;
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
		}

		.content-container {
			width: 100%;
			height: calc(100% - 180rpx);
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.suggestion-list {
				height: 100%;
				width: 100%;
				overflow: auto;


				.suggestion-item {
					width: 100%;
					display: flex;
					flex-direction: column;
					background: #fff;
					padding: 30rpx 40rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.txt-container {
						width: 100%;
						display: flex;
						flex-direction: column;

						.title-container {
							width: 100%;
							padding-bottom: 20rpx;
							text-transform: none;
							border-bottom: 1rpx solid #C7C7C7;
							margin-bottom: 20rpx;
							font-size: 30rpx;
							font-weight: 600;

						}

						.content-txt-container {
							display: -webkit-box;
							/* 需要对老版本的WebKit浏览器支持 */
							-webkit-line-clamp: 2;
							/* 限制为两行 */
							-webkit-box-orient: vertical;
							/* 设置为垂直方向 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 添加省略号 */
							word-break: break-word;
							/* 防止单词过长无法换行 */
						}
					}
				}
			}
		}
	}
</style>